<template>
      <div class="screen screen-1">
        <el-row :gutter="20" class="box-row">
          <el-col :span="8">
            <el-card class="box-card" shadow="never">
              <div class="box-title"> 拆包间已下料</div>
              <div class="box-info font-blue"> {{receiptsData.unpackNums || 0}} </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" shadow="never">
              <div class="box-title"> 涂布下料（正/负）</div>
              <div class="box-info font-blue">
                <span class="font-blue">{{receiptsData.coatingPositiveDownNums || 0}}</span>
                <span class="font-blue"> / </span>
                <span class="font-blue">{{receiptsData.coatingNegativeDownNums || 0}}</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" shadow="never">
              <div class="box-title"> 辊压上料（正/负）</div>
              <div class="box-info font-blue">
                <span class="font-blue">{{receiptsData.rollInPositiveUpNums || 0}}</span>
                <span class="font-blue"> / </span>
                <span class="font-blue">{{receiptsData.rollInNegativeUpNums || 0}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="box-row">
          <el-col :span="8">
            <el-card class="box-card" shadow="never">
              <div class="box-title"> 拆包间缓存架状态</div>
              <div class="box-info">
                <span v-for="(item, index) in recodeList"
                      :key="index" :class="[item.usableFlag == 0 ? 'font-green border-green': item.usableFlag == 1 ? 'font-red border-red': 'font-yellow border-yellow', 'mr-5','span-circle']">{{index+1}}</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" shadow="never">
              <div class="box-title"> 缓存架状态（启用/禁用）</div>
              <div class="box-info">
                <span class="font-green">{{positionData.freeNums || 0}}</span>
                <span class="font-blue"> / </span>
                <span class="font-red">{{positionData.occupyNums || 0}}</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" shadow="never">
              <div class="box-title"> AGV状态</div>
              <div class="box-info" v-if="agvList.length">
                 <span v-for="(item, index) in agvList"
                       :key="index" :class="[(item.robotConnectStatus == 'DISCONNECTED' || item.robotConnectStatus == 'SLEEPING' || item.robotStopStatus == 'STOPPED' || item.robotStopStatus == 'SUSPENDED')? 'font-red': 'font-green', 'mr-5']">AGV{{index+1}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card pos-relative" shadow="never">
              <div class="box-title"> 上班次任务量统计</div>
              <div class="chartPie" id="chartPie1" ></div>
              <div class="chartPie-info pos-absolute">
                <div class="chart-info">
                  <div class="chart-title">任务总量</div>
                  <div class="font-blue"> {{preTaskData.totalTaskNums || 0 }} </div>
                </div>
                <div class="chart-info">
                  <div class="chart-title">平均任务完成时间(分钟)</div>
                  <div class="font-blue"> {{preTaskData.avgTaskCompleteTime || 0 }} </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card pos-relative" shadow="never">
              <div class="box-title"> 本班次任务量统计</div>
              <div class="chartPie" id="chartPie2" ></div>
              <div class="chartPie-info pos-absolute">
                <div class="chart-info">
                  <div class="chart-title">任务总量</div>
                  <div class="font-blue"> {{curTaskData.totalTaskNums || 0 }} </div>
                </div>
                <div class="chart-info">
                  <div class="chart-title">平均任务完成时间(分钟)</div>
                  <div class="font-blue"> {{curTaskData.avgTaskCompleteTime || 0 }} </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
</template>

<script>

  import {getReceipts, getPositions, getAgv, getPositions2, getTasks} from '../service/api'
  import { getShiftTime } from '../util/util'
export default {
  name: 'Screen1',
  data() {
    return {
      receiptsData:{},
      positionData:{},
      agvList:[],
      recodeList:[],
      preTaskData :{},
      curTaskData :{},
      chartPie1: null,
      chartPie2: null,
      timer:null
    }
  },
  methods: {
    drawPieChart1() {
      this.chartPie1 = this.$echarts.init(document.getElementById('chartPie1'));
      this.chartPie1.setOption({
        title: {
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color:['#1989fa','orange'],
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['人工', '机器人'],
          textStyle:{
            color: '#ffffff'
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['30%', '60%'],
            data: [
              { value: Math.abs((this.preTaskData && this.preTaskData.subTaskStatisticsInfos && this.preTaskData.subTaskStatisticsInfos.ARTIFICIAL)?this.preTaskData.subTaskStatisticsInfos.ARTIFICIAL.nums:0), name: '人工' },
              { value: Math.abs((this.preTaskData && this.preTaskData.subTaskStatisticsInfos && this.preTaskData.subTaskStatisticsInfos.ROBOT)?this.preTaskData.subTaskStatisticsInfos.ROBOT.nums:0), name: '机器人' },
            ],
            label: { normal: { show: true, position: 'inner' }},
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inner',
                  formatter: '{c}'
                }
              }
            },
          }
        ]
      });
    },
    drawPieChart2() {
      this.chartPie2 = this.$echarts.init(document.getElementById('chartPie2'));
      this.chartPie2.setOption({
        title: {
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['人工', '机器人'],
          textStyle:{
            color: '#ffffff'
          }
        },
        color:['#1989fa','orange'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['30%', '60%'],
            data: [
              { value: Math.abs((this.curTaskData && this.curTaskData.subTaskStatisticsInfos && this.curTaskData.subTaskStatisticsInfos.ARTIFICIAL) ? this.curTaskData.subTaskStatisticsInfos.ARTIFICIAL.nums : 0), name: '人工' },
              { value: Math.abs((this.curTaskData && this.curTaskData.subTaskStatisticsInfos && this.curTaskData.subTaskStatisticsInfos.ROBOT) ? this.curTaskData.subTaskStatisticsInfos.ROBOT.nums : 0), name: '机器人' },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inner',
                  formatter: '{c}'
                }
              }
            },
          }
        ]
      });
    },
    drawCharts() {
      this.drawPieChart1()
      this.drawPieChart2()
    },
    async getData(){
      const resReceipts = await getReceipts()
      const resPositions = await getPositions({
        factoryPositionCode: '',
        factoryPositionName: '缓存架'
      })
      const resAgv = await getAgv({
        robotConnectStatus: 0,
        robotErrorCode: 0,
        robotTaskStatus: 0,
        robotProducts:['K1800L']
      })
      // 获取拆包间缓存架的状态
      const resPositions2 = await getPositions2 ({
        factoryPositionName: '',
        factoryPositionCode: '',
        wareHouseAreaName:''
      })

      const {currShift,preShift} = getShiftTime()
      const resCurTask = await getTasks(Object.assign(currShift,{robotType:'K1800L'}))
      const resPreTask = await getTasks(Object.assign(preShift,{robotType:'K1800L'}))
      this.$nextTick(() => {
        resReceipts && (this.receiptsData = resReceipts)
        resPositions && (this.positionData = resPositions)
        if(resAgv && resAgv.length){
          this.agvList= [resAgv[0],resAgv[1]]
        }
        resPositions2 && (this.recodeList = resPositions2)
        resPreTask && (this.preTaskData = resPreTask)
        resCurTask && (this.curTaskData = resCurTask)
        this.drawCharts()
      })
    }
  },

  mounted: function () {
    this.getData()
    this.timer = setInterval(() => {
      setTimeout(this.getData, 0)
    }, 1000*60)
  },
  beforeDestroy(){
    clearInterval(this.timer);
    this.timer = null;
  }
}
</script>

